<template> 
    <div>
        <div class="stotop" :style="bg">
            <div class="stostop">
                <div class="stopimg">
                    <img :src="logs" :onerror="logo"  alt="">
                </div>
                <div class="stoptitle">
                    <div class="stdianm">{{names}}</div>
                    <div class="stdbot">商品数量：301 已售：0</div>
                </div> 
                <div class="stopsc" style=" opacity: 0;">
                    <!-- <img src="../assets/product/star.png" alt="">
                    <span>收藏</span> -->
                </div>
                <div class="cha" @click="back()">
                    <img src="../assets/product/cha.png" alt="">
                </div>
            </div>
            <div class="stopbo">
                <div class="search">
                    <input type="text" v-model="text" name="search" placeholder="搜索店铺内宝贝">
                </div>
                <div class="stopsousuo" @click="sousuo()">搜本店</div>
            </div> 
        </div>
        <div class="stoplist">
            <div  @click="ChangeClss(0)" :class="index == 0?'storactive':''">
                <span>综合</span>
                <!-- <img src="../assets/product/xiala.png" alt=""> -->
            </div>
            <div  @click="ChangeClss(1)" :class="index == 1?'storactive':''">
                <span>销量</span>
                <!-- <img src="../assets/product/xiala.png" alt=""> -->
            </div>
            <div  @click="ChangeClss(2)" :class="index == 2?'storactive':''">
                <span>新品</span>
                <!-- <img src="../assets/product/xiala.png" alt=""> -->
            </div>
            <div  @click="ChangeClss(3)" :class="index == 3?'storactive':''">
                <span>价格</span>

                <!-- <img src="../assets/product/xiala.png" alt=""> -->
            </div>
        </div>

   <yd-infinitescroll :callback="loadList" ref="infinitescrollDemo">
             <div  slot="list">
        <div class="stopcommodity">
      <!-- <div class="stopcommodity_box" v-for="(item,index) in detailList.lists.data" :key="index"> -->
       <router-link class="stopcommodity_box" :to='"/particulars?id="+item.id' v-for="(item,index) in dList" :key="index">
        <div class="stoppic">
          <!-- <img slot="img" v-lazy="item.thumb"> -->
          <img :src="item.thumb">
          
        </div>
        <div class="stopinfo">
          <div class="stoptitl">
            <div class="stopti">商城</div>
            <div class="stoptitle">{{item.title}}</div>
          </div>
          <!-- <div class="stopprice">
            <span class="stoprate">￥12000000.00</span>
          </div> -->
          <div>
            <span class="stopcate">￥{{item.market_price}}+{{item.redbag_num}} 鸿包</span>
          </div>
          <div class="stopsold">
              <div>已售{{item.sale_number}} 件</div>
              <div>好评99%</div>
              <!-- <div>好评{{item.praise}}</div> -->
          </div>
        </div>
        </router-link>
      <!-- </div>   -->
    </div>
 </div>

     <!-- 数据全部加载完毕显示 -->
        <span slot="doneTip">啦啦啦，啦啦啦，没有数据啦~~</span>

        <!-- 加载中提示，不指定，将显示默认加载中图标 -->
        <img slot="loadingTip" src="http://static.ydcss.com/uploads/ydui/loading/loading10.svg"/>

    </yd-infinitescroll>

    <transition name="el-fade-in">
       <div class="top2" @click="toTop()" v-show="toTopShow">Top</div>
    </transition>
    </div>
</template>
<script>
import Vue from "vue";
import { Search } from "vue-ydui/dist/lib.rem/search";
Vue.component(Search.name, Search);
import {InfiniteScroll} from 'vue-ydui/dist/lib.rem/infinitescroll';
Vue.component(InfiniteScroll.name, InfiniteScroll);
export default {
  name: "store",
  data() {
    return {
      aid: 0,
      index: -1,
      text:'',
      px:1,
      detailList:[], 
      dList:[],
      tex:'',
      logs:'',
      names:'',
      logo: 'this.src="' + require('../assets/order_center/kongbai.png') + '"',
      bg:{
            backgroundImage: "url(" + require("../assets/product/picture.png") + ")",
            backgroundRepeat: "no-repeat",
      },
      page: 2,
      toTopShow:false,
      pageSize:20,
      sid:''
    };
  },
  methods: {
    back: function() {
      this.$router.go(-1);
    },
    isActive: function(aid) {
      this.aid = index;
    },
    particulars: function() {
      this.$router.push("/particulars");
    },
    sousuo(){
      this.detail(this.sid,this.px,this.text)
    },
    ChangeClss: function(index) {
      this.detailList=[];
      if(index==0){
          this.detail(this.sid,0)
      }
      if(index==1){
          this.detail(this.sid,1)
      }
      if(index==2){
          this.detail(this.sid,2)
      }
      if(index==3){
          this.detail(this.sid,3)
      }
      this.index = index;
    },



     detail:function(id,px,tex){
      let self = this;
      let url = "/api/shop/index";
			self.httpPost(url,{user_id:this.user_id,token:this.token,page:1,pageSize:20,shop_id:id,text:tex,type:px},function(res) {
				if (res.code === 200) {
          self.detailList = res.data;
          self.logs = res.data.shop_info.fascia;
          self.names = res.data.shop_info.shop_name;
          self.dList = res.data.lists.data;
				}
      })
    },

    //滚动加载
    loadList() {
      let self = this;
      let url ="/api/shop/index";
      self.httpPost(url,{user_id:this.user_id,token:this.token,page:self.page,pageSize:20,shop_id:this.sid,text:this.tex,type:this.px}, function(res) {
        if (res.code == 200) {          
          let _list = res.data.lists.data;
          self.dList = [...self.dList, ..._list];
          console.log("self.list3list",self.list3list)
          if (_list.length < self.pageSize) {           
            self.$refs.infinitescrollDemo.$emit(
              "ydui.infinitescroll.loadedDone"
            );
            return;
          }
          self.$refs.infinitescrollDemo.$emit("ydui.infinitescroll.finishLoad");     
          self.page++;        
        } else {
          self.$dialog.loading.close();
        }
      });
    }, 
   //显示隐藏
    handleScroll() {
      //首先修改相对滚动位置
      this.scrollTop = this.scrollTop = window.pageYOffset || document.body.scrollTop
      if (this.scrollTop > 300) {
        this.toTopShow = true
      }else {
        this.toTopShow = false
      }
    },
    //点击回到顶部
    toTop:function() {
        document.documentElement.scrollTop = document.body.scrollTop = 0;
    },
  },
  mounted() {
    this.$nextTick(function () {
      //修改事件监听
      window.addEventListener('scroll', this.handleScroll)
    });
  },
  created(){
     document.title="商店" 
     this.user_id = localStorage.getItem('myid');
     this.token = localStorage.getItem('mytoken'); 
     this.sid = this.$route.query.sid; 
     this.detail(this.sid,this.px,this.tex)
  } 
};
</script>
<style>
.stotop {
  width: 100%;
  height: 2.8rem;
  padding: 0.5rem 0;
  /* background-image: url("../assets/product/picture.png"); */
  /* background: pink; */
  background-size: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-around;
}
.stostop {
  margin: 0 auto;
  display: flex;
}
.stopimg {
  width: 0.85rem;
  height: 0.8rem;
  margin-right: 0.1rem;
}
.stopimg img {
  width: 100%;
  height: 100%;
}
.stoptitle {
  /* height: 0.8rem; */
  /* line-height: 1.3; */
  margin-right: 0.4rem;
}
.stdianm {
  font-size: 0.35rem;
  margin-bottom: .1rem;
}
.stdbot {
  color: #999;
}
.storactive {
  color: #f77138;
}
.stopsc {
  width: 1.5rem;
  height: 0.5rem;
  text-align: center;
  line-height: 0.5rem;
  border: 1px solid #f75d1b;
  border-radius: 0.4rem;
  font-size: 0.3rem;
  color: #999;
  margin-right: 0.55rem;
}
.stopsc img {
  height: 60%;
}
.cha {
  margin-top: 0.1rem;
}
.stopbo {
  margin-top: 0.3rem;
  display: flex;
  justify-content: space-around;
}
.search {
  width: 75%;
  height: 0.5rem;
}
.search input {
  width: 100%;
  height: 100%;
  border: none;
  background: #fff url(../assets/nearby/sc.png);
  background-repeat: no-repeat;
  border-radius: 50px;
  padding-left:.5rem;
  background-position: 0.1rem center;
  background-size: 0.4rem;
  background-color: rgba(255, 255, 255, 0.9);
  border: 1px solid #fff;
}
.stopsousuo {
  width: 1.18rem;
  height: 0.5rem;
  background: #f75d1b;
  color: #fff;
  border-radius: 50px;
  text-align: center;
  line-height: 0.5rem;
  font-size: 0.3rem;
}
.stoplist {
  height: 0.8rem;
  line-height: 0.8rem;
  font-size: 0.3rem;
  background: #fff;
  display: flex;
  justify-content: space-around;
  color: #999;
}
.stoplist div {
  width: 20%;
  text-align: center;
}
.stoplist div img {
  margin-top: -0.05rem;
  vertical-align: middle;
}
.stopactive {
  color: #f75d1b;
}
.stopcommodity {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 0 auto;
  margin-top: 0.2rem;
}
.stopcommodity .stopcommodity_box {
  width: 49%;
  background:#fff;
}
.stopcommodity_box:nth-child(2) ~ .stopcommodity_box {
  margin-top: 0.2rem;
}
.stopcommodity .stopcommodity_box img {
  width: 100%;
}
.stopcommodity .stopcommodity_box .stopinfo {
  width: 100%;
  height: 1.5rem;
  padding: 0 0.1rem 0.1rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}
.stoptitl {
  display: flex;
  justify-content: space-between;
}
.stopti {
  margin-top: 0.05rem;
  width: 0.58rem;
  height: 0.35rem;
  line-height: 0.37rem;
  text-align: center;
  background: #ff0000;
  color: #fff;
  border-radius: 0.05rem;
}
.stopcommodity .stopcommodity_box .stopinfo .stoptitle {
  width: 82%;
  font-size: 0.3rem;
  color: #666;
  margin-left: 0.1rem;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.stopcommodity .stopcommodity_box .stopinfo .stopprice {
  width: 100%;
  display: flex;
  justify-content: space-between;
  margin-bottom: 0.1rem;
}
.stopcommodity .stopcommodity_box .stopinfo .stopprice .stoprate {
  font-size: 0.35rem;
  color: #e63f3f;
}
.stopsold {
  display: flex;
  justify-content: space-between;
  font-size: 0.22rem;
  color: #999;
  margin-top: 0.1rem;
}
.stopcommodity .stopcommodity_box .stopinfo .stopcate {
  border: 1px solid #f77138;
  color: #f77138;
  text-align: center;
  font-size: 0.2rem;
  padding: 0 0.02rem;
}
.stoppic{
  background: rgba(0,0,0,.3)
}
.stoppic img{
  display: block;
}
img[lazy=loading] {
  height:40px;
  margin: auto;
  /* background: url("../assets/order_center/kongbai.png") no-repeat fixed center; */
}
.stoplist>div{
  position: relative;
}
.stoplist>div:after{
  display: block;
  clear: both;
  content: '';
  position: absolute;
  top: 30%;
  right: 8%;
  width: 10px;
  height: 10px;
  transform: rotate(-225deg);
  border-top: 2px solid #999;
  border-right: 2px solid #999;
}
.storactive:after{
  display: block;
  clear: both;
  content: '';
  position: absolute;
  top: 30%;
  right: 8%;
  width: 10px;
  height: 10px;
  transform: rotate(-225deg);
  border-top: 2px solid #f77138!important;
  border-right: 2px solid #f77138!important;
}
</style>
